<template>
  <div id="userLayout" :class="['user-layout-wrapper']">
    <div class="top">
      <div class="header">
        <!-- <img src="@/assets/svg/logo/logo-icon.svg" style="height: 30px;">
        <img src="@/assets/svg/logo/logo-text.svg" style="height: 25px;margin-left: 5px;"> -->
        <a href="#">
          <img :src="oemSiteInfo.sysLogoUrl" style="height: 99px;">
        </a>
      </div>
      <!-- <a class="mch-url" href="#">
        <span>商户登录</span>
        <i class="bi bi-arrow-right-short" />
      </a> -->
    </div>
    <div class="container" :style="[{background: 'url(' + oemSiteInfo.mgr.loginPageBGImgUrl + ')'}, {backgroundSize:'cover' }, {backgroundPosition: 'center top'}, {backgroundRepeat:'no-repeat'}]">
      <div class="user-layout-lang" />
      <div class="user-layout-content">
        <!-- 错误提示信息 -->
        
        <div class="main">
          <a-alert v-if="showLoginErrorInfo" type="error" showIcon style="margin-bottom: 24px;" :message="showLoginErrorInfo" />
          <div class="desc">修改密码</div>
          <a-form ref="formLogin" class="user-layout-login" :model="formState" :rules="vdata.rules" @submit="handleSubmit">
            <a-form-item name="telphone" class="input-item">
              <login-text-up v-model:value="formState.telphone" :isLogin="true" placeholder="手机号" />
            </a-form-item>
        
            <a-form-item
              name="newPwd"
              class="input-item"
            >
              <login-text-up v-model:value="formState.newPwd" v-model:strength="pwdConfig.strength" :isLogin="true" placeholder="请输入新密码" isPassword="password" />
            </a-form-item>
            <a-form-item name="confirmPwd" class="input-item">
              <login-text-up v-model:value="formState.confirmPwd" :isLogin="true" placeholder="请确认新密码" isPassword="password" />
            </a-form-item>
            <a-form-item name="">
              <template #label>
                <span style="color: #fff;">密码强度</span>
                &nbsp;&nbsp;
                <a-tooltip placement="right" title="密码强度越高，密码被破解的难度越大，建议密码长度不少于8位，且使用复杂字符组合。">
                  <question-circle-outlined style="color: #fff;" />
                </a-tooltip>
                &nbsp;&nbsp;
                <span v-show="pwdConfig.strength === 1" :style="{color:pwdConfig.color[1]}">弱</span>
                <span v-show="pwdConfig.strength === 2" :style="{color:pwdConfig.color[2]}">中</span>
                <span v-show="pwdConfig.strength === 3" :style="{color:pwdConfig.color[3]}">强</span>
              </template>
              <a-progress :showInfo="false" :strokeColor="pwdConfig.color[pwdConfig.strength]" :percent="pwdConfig.percent[pwdConfig.strength]" />
            </a-form-item>

            <a-form-item style="margin-bottom: 30px;">
              <!-- 忘记密码 -->
              <a class="forge-password" style="float: right;" @click="toLogin">去登录 >></a>
            </a-form-item>
          </a-form>
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button submit"
            :loading="loginBtnLoadingFlag"
            style="width: 300px"
            @click="handleSubmit"
          >
            确认
          </a-button>
        </div>
        <div class="footer" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { modifyPwd } from '@/api/login'
import { req, API_URL_SYS_SMS_SEND_MSG } from '@/api/manage'
import router from '@/router'
import { message } from 'ant-design-vue'
import { ref, reactive, onMounted } from 'vue'
import { useOem } from '@/store/modules/oem'
let loginBtnLoadingFlag = false  // 登录按钮是否显示 加载状态
let showLoginErrorInfo = ref('')  // 是否显示登录错误面板信息
let timer: number = -1

// 获取网站信息
const oemSiteInfo = useOem().getSiteInfo()

let formLogin = ref()

let formState = reactive({
  telphone: '',
  newPwd: '',
  confirmPwd: '',
})

const vdata = reactive({
  isDisabled : false,
  passwordRules: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[~!@#\$%\^&\*\(\)\-=_\+])[A-Za-z\d~!@#\$%\^&\*\(\)\-=_\+]{8,16}$/, //密码规则
  passwordRulesText: '密码需要包含字母、数字和特殊字符', //密码规则提示文字
  rules : {
  telphone: [{ required: true, pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: ['blur','change'] }],
  newPwd: [
            { required: false, trigger: ['blur','change'] }, {
              validator: (rule, value) => {
                if (formState.telphone === formState.newPwd && formState.telphone !== ''){
                  return Promise.reject('新密码不能与手机号相同')
                }
                if (formState.newPwd.length < 8 || formState.newPwd.length > 16){
                  return Promise.reject('密码长度必须在8-16位之间')
                }
                if (!vdata.passwordRules.test(formState.newPwd)) {
                  return Promise.reject(vdata.passwordRulesText)
                } else if(formState.newPwd !== formState.confirmPwd) {
                  return Promise.reject('新密码与确认新密码不一致')
                } else return Promise.resolve()
              }
            }
          ],
  confirmPwd: [{ required: false, trigger: ['blur','change'] }, {
              validator: (rule, value) => {
                if (formState.telphone === formState.newPwd && formState.telphone !== ''){
                  return Promise.reject('新密码不能与手机号相同')
                }
                if (formState.newPwd.length < 8 || formState.newPwd.length > 16){
                  return Promise.reject('密码长度必须在8-16位之间')
                }
                if (!vdata.passwordRules.test(formState.confirmPwd)) {
                  return Promise.reject(vdata.passwordRulesText)
                } else if(formState.newPwd !== formState.confirmPwd) {
                  return Promise.reject('新密码与确认新密码不一致')
                } else return Promise.resolve()
              }
            }]
  }
} as any )
// 密码强度相关配置
const pwdConfig = reactive({
  strength: 0, // 密码强度 0-默认 1-弱 2-中 3-强
  color: ['#f5f5f5', '#FF4B33', '#FFA500', '#008000'],  // 进度条颜色  0-默认 1-弱 2-中 3-强
  percent: [0, 33, 66, 100], // 进度条百分比  0-默认 33-弱 66-中 100-强
} as any)
// handler
function handleSubmit (){
  formLogin.value.validate().then(valid =>{
    let params = {
      phone: formState.telphone,
      newPwd: formState.newPwd,
      confirmPwd: formState.confirmPwd,
    } as any
    loginBtnLoadingFlag = true
    modifyPwd(params).then((res) => {
      message.success('修改成功')
      router.push({ path: '/user/login' }) // 校验成功，返回登录页
    }).catch(err => {
      showLoginErrorInfo = (err.msg || JSON.stringify(err))
      loginBtnLoadingFlag = false
    })
  }).catch(valid =>{})
}

async function sendSMS () { // 发送短信验证
  await formLogin.value.validate(['telphone'])
  vdata.isDisabled = true
  req.add(API_URL_SYS_SMS_SEND_MSG,{phone: formState.telphone, flag: 1}).then(res => {
    return message.success('发送成功！')
  }).catch(err => {
    showLoginErrorInfo = (err.msg || JSON.stringify(err))
    // 出错后三秒停止计时
    setTimeout(() => {
      if (timer) clearInterval(timer)
      vdata.isDisabled = false
      vdata.codeBtnText = '发送短信验证码'
    }, 3000)
  })
  
  let time = 60 // 重发验证码时间
  vdata.codeBtnText = `${time}秒后重新发送`
  const timer = setInterval(() => {
    time -= 1
    vdata.codeBtnText = `${time}秒后重新发送`
    if (time === 0) {
      clearInterval(timer)
      vdata.isDisabled = false
      vdata.codeBtnText = '发送短信验证码'
    }
  }, 1000)
}

// 忘记密码跳转页面
function toLogin () {
  router.push({ name: 'login', path: '/user/login' })
}
</script>

<style lang="less" scoped>

#userLayout.user-layout-wrapper {
  height: 100%;
  .top {
    position: absolute;
    z-index: 11;
    top: 90px;
    left:90px;
    height: 80px;
    // padding: 0 35px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    align-items: normal;
    .header {
      height: 44px;
      line-height: 44px;
    }

    .bi{
      font-size: 18px;
    }
  }
  .tip{
    position: absolute;
    z-index: 11;
    bottom: 90px;
    left:90px;
    color: #fff;
    font-family: AlibabaPuHuiTi-Regular;
    font-size: 24px;
    font-weight: 200;
    .big{
      font-weight: 400;
      font-size: 64px;
    }
    .line{
      width: 120px;
      height: 4px;
      background: #fff;
      margin-top: 70px;
    }
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: flex-end; //修改这一项来决定登录对话框的水平位置，flex-start == left； center == center； flex-end == right
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    // height: calc(100vh - 80px);
    height: calc(100vh);
    min-height: 700px;
    background: #f0f2f5 url(/src/assets/svg/background.svg) no-repeat 50%;
    background-size: cover;
    //padding: 50px 0 84px;
    position: relative;
    transition: 0.3s ease;

    .user-layout-lang {
      width: 100%;
      // height: 40px;
      // line-height: 44px;
      height: 0;
      text-align: right;
    }

    .user-layout-content {
      width: 100%;
      height: 100vh;
      transition: 0.3s ease;
       input {
          height: 40px !important;
        }

      .main {
        padding: 50px 30px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        // background: #fff;
        // border-top: 1px solid #e7eaf3;
        align-items: center;
        transition: all 0.3s , border 0s ease;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(15px);
        .ant-form{
          max-width: 300px;
        }
        .desc {
          font-weight: bold;
          font-size: 36px;
          letter-spacing: 0.04em;
          // color: @primary-color;
          color:#fff;
          margin-bottom: 50px;
          text-align: center;
        }
        .input-item {
          height: 65px;
          width: 500px;
          margin:0 !important;
        }
        .ant-checkbox-wrapper{
          color: #fff;
        }
      }

      .footer {
        // position: absolute;
        width: 100%;
        bottom: 0;
        padding: 0 16px;
        margin: 48px 0 24px;
        text-align: center;

        .links {
          margin-bottom: 8px;
          font-size: 14px;
          a {
            color: rgba(0, 0, 0, 0.45);
            transition: all 0.3s;
            &:not(:last-child) {
              margin-right: 40px;
            }
          }
        }
        .copyright {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }
      }
    }

    a {
      text-decoration: none;
    }

  }
  
  //登录页响应式的调整
  @media screen and (min-width:769px) and (max-width:1024px){
    @topTipM:50px;
    .tip{
      font-size: 14px;
      .big{
        font-size: 36px;
      }
      .line{
        margin-top: 30px;
      }
    }
    .container {
      // padding: 0 100px;
      // min-height: 700px;
      // height: calc(100vh - 80px);
      align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 38%;
        min-width: 360px;
        // height: auto;
        .main{
          // width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          // border: 0.0625rem solid #E7EAF3 ;
          // height: auto;
          justify-content: center;
          // border-radius: 10px;
        }
      }
    }
  }
  @media screen and (min-width:1025px) and (max-width:1366px){
    .container {
      // padding: 0 150px;
      // min-height: 700px;
      // height: calc(100vh - 80px);
      // align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 38%;
        min-width: 360px;
        // height: auto;
        .main{
          // width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          // border: 0.0625rem solid #E7EAF3 ;
          // height: auto;
          justify-content: center;
          // border-radius: 10px;
        }
      }
    }
  }
  @media screen and (min-width:1367px) and (max-width:1600px){
    .container {
      // padding: 0 250px;
      // min-height: 700px;
      // height: calc(100vh - 80px);
      // align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 38%;
        min-width: 360px;
        // height: auto;
        .main{
          // width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          // border: 0.0625rem solid #E7EAF3 ;
          // height: auto;
          justify-content: center;
          // border-radius: 10px;
        }
      }
    }
  }
  @media screen and (min-width:1601px){
    .container {
      // padding: 0 300px;
      // min-height: 700px;
      // height: calc(100vh - 80px);
      // align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 38%;
        min-width: 360px;
        // height: auto;
        .main{
          // width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          // border: 0.0625rem solid #E7EAF3 ;
          // height: auto;
          justify-content: center;
          // border-radius: 10px;
        }
      }
    }
  }
}

.code-body {
  padding-top: 20px;
  width: 300px;
  overflow-x: hidden;
}
.code-layout {
  display: flex;
  width: 600px;
  transition: .3s;
  .code-layout-item {
    width: 50%;
  }
}
.googleShow {
  margin-left: -300px;
}

</style>

<style lang="less" scoped>
/deep/ input:-webkit-autofill{
  box-shadow: inset 0 0 0 1000px #fff;
}
/deep/ input:hover:-webkit-autofill{
  box-shadow: inset 0 0 0 1000px #fff;
}

.user-layout-login {
 
  label {
    font-size: 14px;
  }

  .forge-password {
    font-size: 14px;
    // color: @gz-theme;
    color: #fff;
  }

  // button.login-button {
  //   padding: 0 15px;
  //   font-size: 16px;
  //   height: 40px;
  //   width: 100%;
  // }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }
  .code {
    display: flex;
    justify-content: space-between;
    .code-input {
      width: 216px;
    }
    .code-img {
      width: 120px;
      height: 40px;
      background-color: #ddd;
      margin-left: 10px;
      img{
        width: 120px;
        height: 40px;
      }
    }
  }
  .submit {
    margin-bottom: 0;
  }
}
.vercode-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.8;
  text-align:center;
  line-height: 40px;
  color:#fff;
  &:hover {
    cursor: pointer;
  }
}

a{
		text-decoration: none;
		color: #666666;
		}

		.bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
			background-color: #eeeeee;
			text-align: center;
			line-height: 35px;
			font-size: .8125rem;
			color: #666666;
		}
</style>

